<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>线下还款</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <style>
        body {
            background-color: white;
            width: 3.75rem;
            /*height: 6rem;*/
            position: relative;
        }

        .submitBtn {
            position: static;
            width: 3.43rem;
            height: .45rem;
            text-align: center;
            font-size: .15rem;
            margin: 0 auto .18rem;
            padding: 0;
            background: #3276FE;
            border-radius: .23rem;
        }

        .layer_dialog {
            position: absolute;
            top: 0;
            left: 0;
            height: 500px;
            margin: 0;
            padding: 0;
        }

        body>div {
            /*height: .6rem;*/
            line-height: .2rem;
            padding: .15rem .15rem .15rem .15rem
            /*overflow: hidden;*/
        }

        .orderContent .orderTitle {
            height: .2rem;
            line-height: .2rem;
            font-size: .12rem;
            text-align: center;
        }

        .orderContent .orderValue {
            height: .2rem;
            line-height: .2rem;
            font-size: .12rem;
            text-align: center;
        }

        .orderTitle {
            margin-top: .2rem;
        }

        .orderTitle1 {
            margin-top: .12rem;
        }

        .repaymengtInf .repaymengtInfList {
            height: .25rem;
            line-height: .25rem;
        }

        .repaymengtInf .repaymengtInfList:nth-child(2n+1) {
            font-weight: 700;
        }

        .repaymengtInf a {
            display: block;
            width: .8rem;
            text-align: center;
            height: .3rem;
            line-height: .3rem;
            background-color: rgb(255, 85, 78);
            float: right;
            color: white;
            margin: -.4rem 0rem 0 0;
            border-radius: .05rem;
        }

        .orderTips {
            background: #f9f9f9;
            font-size: .12rem;
        }

        .orderTips a {
            color: rgb(50, 118, 254);
        }

        .orderNum {
            height: .4rem;
            line-height: .4rem;
            border-bottom: solid .01rem #eee;
        }

        .orderNum a {
            display: block;
            float: left;
            width: .8rem;
        }

        .orderNum i {
            display: block;
            float: right;
            width: .2rem;
            margin: .125rem 0;
            height: .2rem;
            background: url(../img/ask.png) center;
            background-size: .2rem .2rem;
            background-repeat: no-repeat;
        }

        .orderNum i img {
            width: 100%;
        }

        .orderNum input {
            width: 1.8rem;
            height: .2rem;
            line-height: .2rem;
            font-size: .14rem;
            padding: .1rem;
            float: left;
        }

        .picTitle {
            margin: .15rem 0;
        }

        .photo_wap {
            float: left;
            box-sizing: border-box;
            position: relative;
            width: 0.95rem;
            margin-right: .1rem;
            margin-top: .25rem;
            margin-left: .1rem;
        }

        .photos {
            overflow: hidden;
        }

        .photo {
            position: relative;
            border-radius: .05rem;
            width: 0.9rem;
            height: 0.9rem;
            background: #fff;
            overflow: hidden;
            border: .01rem dashed #BEBEBE;
        }


        .photo .feed_image_item {
            width: .3rem;
            height: .3rem;
            margin: .3rem auto;
            display: block;
        }

        .photo .photo_img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .photo .photo_upload {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .2);
            z-index: 3;
        }

        .photo .photo_upload .photo_upload_progress {
            position: absolute;
            width: 80%;
            height: auto;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .photo .photo_upload .photo_upload_cancel {
            position: absolute;
            top: .03rem;
            right: .03rem;
            width: .15rem;
            height: .15rem;
            text-align: center;
            background: url(../images/feed_del.png) no-repeat;
            background-size: 100% 100%;

        }

        .photo .photo_upload_bar {
            width: 100%;
            height: 2px;
            border-radius: 1px;
        }

        .photo .photo_upload_bar>i {
            display: block;
            width: 0;
            height: 100%;
            background: #ff6a00;
            -webkit-transition: width .6s 0s ease-out;
            transition: width .6s 0s ease-out;
        }

        .photo .photo_upload_txt {
            padding-top: .08rem;
            font-size: .08rem;
            color: #fff;
        }

        .orderContent,
        .orderTips,
        .repaymengtInf {
            overflow: hidden;
        }

        .repaymengtInfList>div {
            float: left;
        }

        .repaymengtInfList button {
            display: inline-block;
            float: right;
            font-size: .12rem;
            font-weight: 400;
            margin: 0;
            padding: 0 .1rem;
            height: .3rem;
            line-height: .3rem;
            border-radius: .25rem;
            background-color: #FF4537;
            color: white;
        }

        /*repayAlert1弹窗*/

        .alert11 {
            /*display: none;*/
        }

        .repayAlert1 {
            width: 3.11rem;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 33;
            background: #fff;
            border-radius: .15rem;
        }

        .subBtn {
            width: 2.25rem;
            height: .45rem;
            line-height: .45rem;
            color: #fff;
            font-size: .15rem;
            text-align: center;
            background: #FFB624;
            border-radius: .24rem;
            margin: 0 auto .34rem;
        }

        .alert1List1,
        .layer_dialog_hd {
            width: 3.11rem;
            height: .8rem;
            background: url(../img/topbg.png) no-repeat 0px 0px;
            background-size: 100%;
        }

        .layer_dialog_hd,
        .layer_dialog .layer_dialog_box {
            width: 3.11rem;
            padding: 0 !important;
        }

        .layer_dialog_hd {
            line-height: .8rem;
        }

        .layer_dialog_cn {
            width: 2rem;
            margin: .43rem auto .37rem;
        }

        .layer_dialog_ft {
            width: 2.25rem !important;
            height: .45rem !important;
            line-height: .45rem !important;
            font-size: .15rem !important;
            background-color: #FF4537 !important;
            border-radius: .23rem !important;
        }

        .layer_btn {
            line-height: .45rem !important;
        }

        .layer_dialog_title {
            font-size: .15rem;
            color: #fff;
        }

        .alert1List2,
        .alert2List2 {
            font-weight: 600;
            font-size: .15rem;
            padding: .26rem 0 0 .18rem;
        }

        .alert1List3 {
            width: 2.5rem;
            margin: .27rem auto .21rem;
        }

        .alert1List3 a {
            color: rgb(50, 118, 254);
        }

        /*repayAlert2弹窗*/

        .repayAlert2 {
            width: 3.11rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -40%);
            z-index: 30;
            background: #fff;
            border-radius: .24rem;
        }

        .denTip1 {
            width: 2.5rem;
            height: 2.18rem;
            background: url(../img/denTip1.png) no-repeat center;
            background-size: 100% 100%;
            margin: .26rem auto .11rem;
        }

        .denTip2 {
            width: 2.5rem;
            height: 1.66rem;
            background: url(../img/denTip2.png) no-repeat center;
            background-size: 100% 100%;
            margin: .23rem auto .16rem;
        }

        .repayAlert2 img {
            display: block;
            position: absolute;
            bottom: .3rem;
            left: .4rem;
            width: 2.2rem;
        }

        .alert2List3 {
            width: 2.2rem;
            padding: 0 .2rem 0;
            text-align: center;
        }

        .alert2List4 {
            width: 2.5rem;
            margin: 0 auto .11rem;
            text-align: left;
        }

        .repayAlert2 a {
            color: rgb(50, 118, 254);
        }

        .alert1ListTitle {
            display: block;
            font-size: .12rem;
            color: #fff;
            text-align: center;
            padding-top: .2rem;
        }

        .alert1ListTips {
            display: block;
            color: #fff;
            text-indent: 1rem;
        }

        .tipsOpreat {
            width: 2.51rem;
            height: 1.57rem;
            margin: .26rem auto 0;
            background: url(../img/tipsImg.png) no-repeat center;
            background-size: 100%;
        }

        .orderContentWrap {
            width: 100%;
            height: 1.6rem;
            background-color: #eaeaea;
            background-image: url(../img/bigBg.png);
            background-position: -4px 28px;
            background-repeat: no-repeat;
            background-size: 103%;
            padding: 0;
            padding-top: .16rem;
        }

        .orderContent {
            width: 3.42rem;
            height: 1.6rem;
            color: #fff;
            padding: 0;
            margin: 0 auto;
            border-radius: .1rem .1rem 0 0;
            background: -webkit-linear-gradient(left, #3276FE, #4CC2FF);
            background: linear-gradient(to right, #3276FE, #4CC2FF);
        }

        .payCountWrap {
            padding: .15rem 0;
        }

        .payCount {
            font-size: .28rem;
        }

        .alipayNum {
            font-size: .18rem;
            font-weight: bold;
        }

        .alipayName {
            font-size: .12rem;
            color: #5B5C5E;
        }

        .repaymengtInfCom {
            padding: 0 0 0 .16rem;
        }

        .orderTipsTxt {
            color: #5B5C5E;
            background: #E8EBEF;
            padding: .18rem .15rem;
            margin: .1rem .16rem;
            border-radius: .1rem;
        }

        .repayAlert2 {
            display: none;
        }

        header {
            width: 100%;
            height: .44rem;
            line-height: .44rem;
        }

        header img,
        header span,
        header a {
            display: inline-block;
            float: left;
            color: #000;
        }

        header .backIcon {
            width: .24rem;
            height: .24rem;
            margin: .1rem 0 0 .16rem;
            /* opacity: 0; */
        }

        header img {
            width: .24rem !important;
        }

        header .pageTitle {
            width: 80%;
            text-align: center;
            font-size: .17rem;
        }

        header .refresh {
            float: right;
            margin-right: .16rem;
            font-size: .14rem;
        }
    </style>
</head>

<body>
    <!-- 蒙版 -->
    <!--<header>
            <a class="backIcon" href="repaymentDetail.html"><img  src="../img/backIconBlue.png" /></a>
            <span class="pageTitle">线下还款</span>
            <span class="refresh"></span>
    </header>      -->
    <div class="orderContentWrap">
        <div class="orderContent">
            <div class="orderList">
                <div class="orderTitle">应还款金额</div>
                <div class="orderValue payCountWrap">
                    <span class="payCount"></span>元</div>
            </div>
            <div class="orderList">
                <div class="orderValue"></div>
            </div>
            <div class="orderList">
                <div class="orderTitle orderTitle1">编号:
                    <span class="orderValue"></span>
                </div>

            </div>
        </div>
    </div>
    <div class="repaymengtInf">
        <div class="repaymengtInfList">
            <div class="alipayNum" id="alipayNumber"></div>
            <button type="button" id="id_copy" data-clipboard-target=".repaymengtInfList>div" data-clipboard-action="copy">
                一键复制
            </button>
        </div>
        <div class="repaymengtInfList alipayName">支付宝账号</div>
    </div>
    <div class="repaymengtInfCom">
        <div class="alipayNum" id="alipayName"></div>
        <div class="repaymengtInfList alipayName">支付宝名称</div>
    </div>
    <div class="orderTips  orderTipsTxt">
        请按账单金额给上述账号转账，并备注您的姓名和注册手机号。为避免转入其它账号，转账时请先进行账号认证；如遇到谨防欺诈提醒，点击【取消】关闭即可。转账成功后上传转账截图提交申请，
        <a>查看示例</a>
    </div>
    <div class="uploadPic">
        <div class="orderNum">
            <input type="text" id="alipayNo" placeholder="请输入还款使用的支付宝账号">
            <i></i>
        </div>

        <div class="feed_image">
            <div class="feed_tit feed_tit1">上传图片：
                <span style="font-size: .12rem;float: right;color:rgb(133,133,133);">不超过3张</span>
            </div>
            <div class="photos">
                <div class="photo_wap">
                    <div class="photo btn_add_photo" id="btnAddPhoto">
                        <img class="feed_image_item" src="../img/add.png">
                    </div>
                    <input type="file" accept="image/*" class="upload" id="flContractPhoto" data-name="Contract" />
                </div>
            </div>
        </div>
    </div>

    <div class="submitBtn">
        提交
    </div>
    <div class="alert11">
        <div class='layer_mask'></div>
        <div class="repayAlert1">
            <div class="alert1List1">
                <span class="alert1ListTitle">线下支付宝转账可能会遇到以下几种情况</span>
                <span class="alert1ListTips">请按照指引操作</span>
            </div>
            <div class="alert1List2">1、对方账号认证</div>
            <div class="tipsOpreat"></div>
            <div class="alert1List3">请补全账号信息，输入“
                <a>陕</a>”字，并点击确认</div>
            <div class="subBtn subBtn1">我知道了</div>
            <div style="width: 100%;height: 1px;"></div>
        </div>
        <div class="repayAlert2">
            <div class="alert1List1">
                <span class="alert1ListTitle" style="text-align: center;text-indent:0">线下支付宝转账可能会遇到以下几种情况</span>
                <span class="alert1ListTips">请按照指引操作</span>
            </div>
            <div class="alert2List2">2、风险提示</div>
            <div class="denTip1"></div>
            <div class="alert2List3">点击
                <a>【我已核实】</a> ，方可转账</div>
            <div class="denTip2"></div>
            <div class="alert2List4">点击
                <a>【取消】</a>，方可转账</div>
            <div class="subBtn subBtn2">我知道了</div>
            <div style="width: 100%;height: 1px;"></div>
        </div>
    </div>
</body>
<!-- 脚本sd -->
<script src="../lib/zepto.min.js?rev=@@hash"></script>
<script src="../js/main.js?rev=@@hash"></script>
<script src="../js/upload.js?rev=@@hash"></script>
<script src="../js/clipboard.min.js"></script>
<script>
    !function (global, layer, userUtil, dataUtil) {
        $("body").height(document.documentElement.clientHeight);
        var sessionId = userUtil.sid();
        var orderNo;
        if (global.query) {
            orderNo = global.query['orderNo'];
        }
        // 上传图片
        !function () {
            new PicUpLoad("flContractPhoto", {
                formUrl: global.localUrl + 'wallet/upload/imageUpload',
                formData: { type: "OFF_LINE_REFUND_IMAGE", sessionId: userUtil.sid() },
                onFileRead: function (fileObj) {
                    canUpload = true;
                    var $p = $("<div class=\"photo_wap\"><div class=\"photo\"><input type=\"hidden\" class=\"photo_url\"/><img class=\"photo_bg\" /><div class=\"photo_upload\"><div class=\"photo_upload_progress\"><div class=\"photo_upload_bar\"><i></i></div><p class=\"photo_upload_txt\">正在读取文件</p></div><div class=\"photo_upload_cancel\"></div></div></div></div>");
                    $p.find(".photo_upload_cancel").on("click", function () { _remove($p); });
                    $p.insertBefore($("#btnAddPhoto").parents(".photo_wap"));
                    photoLimit();
                    fileObj.domBar = $p;
                },
                onLoadStart: function (e, fileObj) {
                    var $p = fileObj.domBar;
                    $p.find(".photo_upload_cancel ").hide();
                    _showProgress($p);
                },
                onProgress: function (e, fileObj) {
                    var $p = fileObj.domBar;
                    var _loaded = e.loaded;
                    var _total = e.total;
                    var _per = Math.floor(100 * _loaded / _total);
                    _showProgress($p, _per);
                },
                onSuccess: function (re, fileObj) {
                    var $p = fileObj.domBar;
                    $p.find(".photo_upload_progress ").hide();
                    $p.find(".photo_upload_cancel ").show();
                    $p.find(".photo_url").val(re.data.url);

                    if (0 == $p.find(".photo_img").length) {
                        $p.find(".photo_bg").after("<img class=\"photo_img\" />");
                    }
                    $p.find(".photo_img").attr("src", fileObj.localUri);
                },
                onFail: function (re, fileObj) {
                    layer.tips("上传失败，请稍后重试");
                    _remove(fileObj.domBar);
                },
                onError: function (fileObj) {
                    layer.tips(global.netError);
                    _remove(fileObj.domBar);
                }
            }).init();

            function _showProgress($p, per) {
                if (per) {
                    per = 100 == per ? 99 : per;  //容错上传100%卡住的情况
                    $p.find(".photo_upload_bar i").css("width", per + "%");
                    $p.find(".photo_upload_txt").text("正在上传 " + per + "%");
                } else {
                    $p.find(".photo_upload_bar i").css("width", "0");
                    $p.find(".photo_upload_txt").text("正在准备上传");
                }
            }

            function _remove($p) {
                $p.remove();
                photoLimit();
            }
        }();

        // 获取页面数据
        function getModel() {
            var _arr = [];
            $(".photos .photo").each(function (k, v) {
                if (!$(v).hasClass("btn_add_photo")) {
                    var _url = $(v).find(".photo_url").val();
                    if (_url) {
                        _arr.push(_url);
                    } else {
                        _arr.push("");
                    }
                }
            });
            return {
                uploadImages: _arr
            }
        };

        // 反馈字数计算
        $("#feedText").keyup(function () {
            $("#feedCount").text($("#feedText").val().length);
        });
        // 控制最多传几张图片
        function photoLimit() {
            var _max = 3;
            if ($(".photos .photo").length >= _max + 1) {
                $("#btnAddPhoto").parents(".photo_wap").hide();
            } else {
                $("#btnAddPhoto").parents(".photo_wap").show();
            }
        }
        /////提交线下还款信息
        $(".submitBtn").click(function () {
            $(".submitBtn").off("click");
            var imagess = getModel().uploadImages.join("|");
            var _data = {
                "sessionId": sessionId,
                "orderNo": localStorage.getItem("orderNo"),
                "alipayNo": $("#alipayNo").val(),
                "images": imagess,
                "offineRefundType": 1
            }
            var zhifubao = $("#alipayNo").val();
            if (!zhifubao || !imagess) {
                layer.tips("参数不全，请输入支付宝账号并上传图片");
                setTimeout(function () {
                    //window.location.reload();
                }, 2000);
                return;
            }
            $.ajax({
                url: global.localUrl + "wallet/orders/offlineRefund",
                type: "post",
                data: JSON.stringify(_data),
                contentType: 'application/json;charset=utf-8',
                success: function (re) {
                    if (1 == re.code) {
                        layer.tips("提交成功");
                        setTimeout(function () {
                            //window.location.href=global.localUrl +"index.html";
                            window.location.href = "applyRecord.html";
                        }, 2000);
                    }
                    else {
                        setTimeout(function () {
                            //window.location.reload();
                        }, 2000);
                        layer.tips(re.message);
                    }
                },
                error: function () {
                    layer.tips(global.netError);
                }
            });
        })


        //初始化线下还款信息
        function offlineRepay() {
            var _data = {
                "sessionId": sessionId,
                "orderNo": localStorage.getItem("orderNo"),
                "offineRefundType": 1
            }
            $.ajax({
                url: global.localUrl + "wallet/orders/offlineRefundApply",
                type: "post",
                data: JSON.stringify(_data),
                contentType: 'application/json;charset=utf-8',
                success: function (re) {
                    var res = "2018-10-21";
                    if (1 == re.code) {
                        $(".payCount").html(re.data.refundAmount);
                        $(".orderValue").eq(1).html(re.data.refundTime.substring(5, 7) + "日" + re.data.refundTime.substr(8, 10) + "还款日");
                        $(".orderValue").eq(2).html(re.data.orderNo);
                        $("#alipayName").html(re.data.sysChannelAccountResponse.alipayName);
                        $("#alipayNumber").html(re.data.sysChannelAccountResponse.alipayNo);

                    }
                    else {

                        layer.tips(re.message);
                    }
                },
                error: function () {
                    layer.tips(global.netError);
                }
            });
        }
        offlineRepay();
        // 弹窗示例、提醒
        $(".orderTips a").click(function () {
            // window.location.href= global.localUrl + "trust/simple_zhifubao.html";
            window.location.href = "simple_zhifubao.html";
        })

        $('.orderNum i').click(function () {
            var obj = {
                title: "支付宝账号获取方式",
                content: "首先，请登录手机支付宝，点击【我的】—头像右边的>展开键—【个人主页】查询到当前登录的支付宝账户。",
                btnText: "我知道了",
                btnEvent: function () { }
            }
            layer.alert(obj);
        })

        //初始化页面时候的弹窗提醒
        $(".subBtn1").click(function () {
            $(".repayAlert1").css({ "display": "none" });
            $(".repayAlert2").css({ "display": "block" })
        })
        $(".subBtn2").click(function () {
            $(".repayAlert2").css({ "display": "none" })
            $('.alert11').css("display", "none");
        })


        //一键复制
        $(".repaymengtInfList button").click(function () {
            var clipboard = new ClipboardJS("#id_copy");
            layer.tips("复制成功")
            clipboard.on("success", function (element) {//复制成功的回调
                //console.log(element.text)
            });
            clipboard.on("error", function (element) {//复制失败的回调
            })
        })
    }(global, layer, userUtil, dataUtil)

</script>

</html>